<template>
	<view class="radio-item" :class="nowId==info[id] && 'active'">
		<image :src="nowId==info[id] ? radioActiveIcon : radioIcon" class="icon"></image>
		<view :class="isEllipsis && 'ellipsis'">{{info[name]}}</view>
	</view>
</template>

<script setup>
	import radioIcon from '@/static/img/common/radio.png'
	import radioActiveIcon from '@/static/img/common/radio-active.png'
	import {
		ref
	} from 'vue';
	const props = defineProps({
		info: {
			type: Object,
			default: () => ({
				projectName: 'aaa',
				projectId: 1
			})
		},
		nowId: {
			type: String,
			default: '1'
		},
		name: {
			type: String,
			default: 'projectName'
		},
		id: {
			type: String,
			default: 'projectId'
		},
		isEllipsis: {
			type: Boolean,
			default: false
		}
	})
	// console.log(props.info)
	// const nowItemId = ref(props.nowId)
</script>

<style scoped lang="scss">
	.radio-item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 28rpx;


		&.active {
			color: $primary-color;
		}

		.icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 14rpx;
			flex-shrink: 0;
		}

		.ellipsis {
			white-space: nowrap;
			/* 确保文本在一行内显示 */
			overflow: hidden;
			/* 隐藏超出容器的内容 */
			text-overflow: ellipsis;
			/* 使用省略号表示被截断的文本 */
			// max-width: 200rpx;
			/* 设置最大宽度，确保文本超出时生效 */
		}
	}
</style>